<template>
  <div class="hello">
      <h1>欢迎登录</h1>
    <el-form ref="user"  :model="user" :rules="rules" label-width="80px">
      <el-form-item label="用户名：" prop="username">
          <el-input v-model="user.username" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
          <el-input v-model="user.password" placeholder="请输入密码" show-password clearable></el-input>
      </el-form-item>
      <el-form-item label="验证码：" prop="code">
        <el-row>
          <el-col :span="10">
            <el-input v-model="user.code" placeholder="请输入验证码" clearable></el-input>
          </el-col>
          <el-col :span="14" style="margin-top: -0.3%">
            <img :src="captcha" @click="refresh" style="width: 80%">
          </el-col>
        </el-row>
      </el-form-item>

      <el-button type="primary" @click="onSubmit('user')"  style="width:100%" >登录</el-button>

    </el-form>


  </div>
</template>

<script>
import Qs from 'qs'
export default {
  name: 'HelloWorld',
  data () {
    return {
      captcha:"http://localhost:9090/captcha",
      user:{
        username:'',
        password:'',
        code:''
      },
      rules:{
        username:[
          {required:true, message:"请输入用户名", trigger:"blur"},
          {min:1, max:10, message: "用户名长度为 1 到 10 个字符", trigger: "blur"}
        ],
        password: [
          {required:true, message:"请输入密码", trigger:"blur"},
          {min:1, max:20, message: "密码长度为 1 到 20 个字符", trigger: "blur"}
        ],
        code:[
          {required:true, message:"请输入验证码", trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    onSubmit:function(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let vm = this;
          this.axios({
            url:"/localhost/user/login",
            method:'post',
            data:{
              username:vm.user.username,
              password:vm.user.password,
              code:vm.user.code
            },
            transformRequest:[function (data) {
              return Qs.stringify(data)
            }]
          }).then(function (res) {
            console.log(res.data);
            if (res.data.code == 0){
              vm.$message.success(res.data.msg)
              vm.$store.commit('UpdateUser',res.data.data);
              vm.$router.push("/Home")
            }else {
              vm.$message.error(res.data.msg)
            }

          }).catch(function (err) {
            vm.$message.error(err.data.msg)
          });
        } else {
          vm.$message.error("验证码有误")
          return false;
        }
      });
    },
    refresh:function () {
      this.captcha = "http://localhost:9090/captcha?v=" + new Date();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width: 30%;
  border-radius: 5%;
  background-color: aliceblue;
  text-align: center;
  padding: 1% 1%;
  margin-top: 10%;
  margin-left: 35%;
}
</style>
